<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>分页</title>
    <link rel="stylesheet" href="./bootstrap.min.css">
</head>

<body>

    <ul id="page"></ul>

    <script src="./jquery-1.9.1.min.js"></script>
    <script src="./bootstrap.min.js"></script>
    <script src="./bootstrap-paginator.min.js"></script>

    <script>
        //分页
        $("#page").bootstrapPaginator({
            bootstrapMajorVersion: 3, //对应的bootstrap版本
            size: "normal",//small, normal,large
            currentPage: 1, //当前页数
            numberOfPages: 10, //每次显示页数
            totalPages: 20, //总页数
            shouldShowPage: true, //是否显示>>按钮

            //按钮名称
            itemTexts: function (type, page, current) {
                switch (type) {
                    case "first":
                        return "首页";
                    case "prev":
                        return "前一页";
                    case "next":
                        return "下一页";
                    case "last":
                        return "最后一页";
                    case "page":
                        return "p" + page;
                }
            },
            //操作按钮绑定click事件
            onPageClicked: function (event, originalEvent, type, page) {
                console.log(page)
            }
        });
    </script>


</body>

</html>